<template>
  <view class="page">
    <cdCustomNavbar :title="title" @confirm="confirm" />
    <!-- <uni-search-bar
      placeholder="请输入果蔬的关键词"
      bgColor="#EEEEEE"
      @confirm="search"
      @clear="clear"
      cancelButton="none"
      radius="20"
      v-model="keyword"
    /> -->
    <view style="width: 100%">
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
        <view style="margin-left: 50rpx">
          <view class="item" v-for="item in gardenList" :key="item.id" @click="goToInfo(+item.id)">
            <image :src="item.url" mode="aspectFill" />
            <span class="text">{{ item.name }}</span>
            <span class="mt">{{ item.mt }} {{ item.st }}</span>
          </view>
          <navigator class="floating-button" @click="goToIndex" hover-class="none">
            <uv-avatar
              src="https://crop-doctor.oss-cn-beijing.aliyuncs.com/wechat/add.png"
            ></uv-avatar> </navigator
        ></view>
      </scroll-view>
    </view>

    <!-- <view class="outer">
      <view class="item" v-for="item in gardenList" :key="item.id" @click="goToInfo(+item.id)">
        <image :src="item.url" mode="aspectFill" />
        <span class="text">{{ item.name }}</span>
        <span class="mt">{{ item.mt }} {{ item.st }}</span>
      </view>
      <navigator class="floating-button" @click="goToIndex" hover-class="none">
        <uv-avatar src="https://crop-doctor.oss-cn-beijing.aliyuncs.com/wechat/add.png"></uv-avatar>
      </navigator>
    </view> -->
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getGardenListAPI, searchByKeyWordAPI } from '@/services/garden'
import { onShow } from '@dcloudio/uni-app'
const gardenList = ref([])
const keyword = ref('')
const search = async () => {
  const res = await searchByKeyWordAPI(keyword.value)
  gardenList.value = res.data
}
const clear = async () => {
  const res = await getGardenListAPI()
  gardenList.value = res.data
}
onShow(async () => {
  uni.hideLoading()
  const res = await getGardenListAPI()
  gardenList.value = res.data
})
const goToIndex = () => {
  uni.switchTab({
    url: '/pages/index/index',
  })
}
// 跳转至详情页面
const goToInfo = (id) => {
  uni.navigateTo({ url: `/pages/info/info?tot=garden&id=${id}` })
}
</script>

<style>
.scroll-Y {
  height: 900rpx;
}

.page {
  background: linear-gradient(197.46deg, #1a966c -15.94%, #ffffff 100.8%),
    linear-gradient(0deg, #fff, #fff);
  height: 100vh;
}
.outer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  /* height: 100%; */
  /* background: linear-gradient(197.46deg, #1a966c -15.94%, #ffffff 100.8%),
    linear-gradient(0deg, #fff, #fff); */
}

.item {
  width: 90%;
  margin-top: 5%;
  height: 100rpx;
  background-color: #327349;
  border-radius: 20rpx;
  display: flex;
  position: relative;
  box-shadow: 0px 0px 10px black;
}
.item > image {
  height: 100rpx;
  width: 100rpx;
  margin-left: 20rpx;
  border-radius: 20rpx;
}
.mt {
  font-size: 26rpx;
  line-height: 100rpx;
  margin-left: 40rpx;
  position: absolute;
  right: 20rpx;
  color: #f2e205;
}
.text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 45%;
  margin-left: 20rpx;
  font-size: 30rpx;
  font-weight: bolder;
  line-height: 100rpx;
}

.floating-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
